<template>
  <div class="home">
    <el-container>
      <el-main>
        <h1>混元智能体</h1>
        <el-row :gutter="20" class="feature-cards">
          <el-col :span="8">
            <el-card>
              <template #header>
                <div class="card-header">
                  <h3>提示词生成</h3>
                </div>
              </template>
              <div class="card-content">
                <p>智能生成高质量的 FLUX 和混元视频提示词</p>
                <el-button type="primary" @click="$router.push('/prompt')">开始使用</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <template #header>
                <div class="card-header">
                  <h3>AI 对话</h3>
                </div>
              </template>
              <div class="card-content">
                <p>与 AI 助手进行专业的视频创作对话</p>
                <el-button type="primary" @click="$router.push('/chat')">开始对话</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <template #header>
                <div class="card-header">
                  <h3>系统设置</h3>
                </div>
              </template>
              <div class="card-content">
                <p>配置 API 密钥和个性化设置</p>
                <el-button type="primary" @click="$router.push('/settings')">前往设置</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// 组件逻辑
</script>

<style scoped lang="scss">
.home {
  padding: 20px;

  h1 {
    text-align: center;
    margin-bottom: 40px;
  }

  .feature-cards {
    margin-top: 20px;
  }

  .card-header {
    h3 {
      margin: 0;
    }
  }

  .card-content {
    text-align: center;
    
    p {
      margin-bottom: 20px;
    }
  }
}
</style> 